<template>
	<view>
		<uni-card :title="content.name">
			<view>{{content.first}}----{{content.end}}</view>
			<view>当前站：{{content.runStationsName}}</view>
			<view style="color: #1890FF;">即将到站：{{jijian}}</view>
			<view style="color: #1890FF;">剩余时间：{{content.remainingTime}}分钟</view>
			<view style="color: #1890FF;">间隔几站:{{content.stationsNumber}}</view>
			<view style="color: #1890FF;">剩余距离:{{content.km}}km</view>
		</uni-card>
		<uni-card>
			<uni-steps :options="steps" :active="shu"></uni-steps>
		</uni-card>
	</view>
</template>

<script>
	import api from 'commer/apiURL.js'
	export default {
		data() {
			return {
				base: api.baseurl,
				content:'',
				steps:[],
				shu:'',
				jijian:''
			}
		},
		onLoad(options) {
			this.getlun(options.id)
		},
		methods: {
			getlun(id) {
				this.$get(this.base + '/prod-api/api/metro/line/'+id).then((res) => {
					this.content = res.data
					var i = 0
					res.data.metroStepList.forEach((item)=>{
						if(item.name == res.data.runStationsName){
							this.shu = i
							this.jijian = res.data.metroStepList[i+1].name
						}
						this.steps.push({
							title:item.name 
						})
						i++
					})
					console.log(this.steps)
				})
			}
		}
	}
</script>

<style>

</style>
